<template>
  <div class="a">
    <div class="nlfx">
      <p>内涝分析</p>
      <div>
        <span>日期</span>
        <el-date-picker v-model="value1" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>
      <div>
        <span>预报类型</span
        ><el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <span>时次</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <el-button type="small">降水分析</el-button>
    </div>
    <div class="nlq">
      <p>内涝区</p>
      <div class="btn">
        <el-button type="small">还原</el-button>
        <el-button type="small">刷新预警区域</el-button>
        <el-button type="small">清空预警区</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="名称"> </el-table-column>
        <el-table-column prop="name" label="预警等级"> </el-table-column>
        <el-table-column prop="address" label="预警类型"> </el-table-column>
        <el-table-column prop="address" label="积水深度"> </el-table-column>
      </el-table>
      <div style="margin-top: 10px">
        <el-button type="small">删除</el-button>
        <el-button type="small">预警发布</el-button>
      </div>
    </div>
    <div class="dsccp">
      <p>待生成产品</p>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="制作时间"> </el-table-column>
        <el-table-column prop="name" label="影响区域"> </el-table-column>
        <el-table-column prop="address" label="气象预报时间"> </el-table-column>
        <el-table-column prop="address" label="预报雨量类型"> </el-table-column>
        <el-table-column prop="address" label="制作人"> </el-table-column>
      </el-table>
    </div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="分析" name="first">
        <div class="fx">
          <div>
            <span>地理信息</span
            ><el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <el-button type="small">地理分析</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="制作" name="second">
        <div class="zz">
          <el-checkbox v-model="checked">是否附图</el-checkbox>
          <div>
            <span>文档期数：</span
            ><el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="btn">
            <el-button type="small">模板编辑</el-button>
            <el-button type="small">生成内涝产品</el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "first",
    };
  },
};
</script>
<style scoped lang="less">
.a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  justify-content: center;
  .nlfx {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #dedede;
    p,
    .el-button {
      margin: 10px;
    }
    div {
      display: flex;
      align-items: center;
      margin: 5px;
      span {
        width: 50px;
      }
    }
  }
  .nlq {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid #dedede;
    p {
      margin: 10px;
    }
  }
  .dsccp {
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid #dedede;
    p {
      margin: 10px;
    }
  }
  .el-tabs {
    width: 100%;
    height: 300px;
    .fx {
      display: flex;
      flex-direction: column;
      align-items: center;
      span {
        margin-right: 10px;
      }
    }
    .el-button {
      margin: 10px;
    }
    .zz {
      display: flex;
      flex-direction: column;
      align-items: center;
      .el-select {
        margin: 10px;
      }
    }
  }
}
</style>
